<!--
 * @Author: wangding
 * @Date: 2020-10-28 10:54:37
 * @LastEditTime: 2021-02-02 12:37:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\dictionary\index.vue
-->
<template>
    <div class='dictionary-main-box'>
        <div class="left-sub-box">
            <baseDrawer :title="$t('dictionary.treeTitle')" @changeShow='changeShow' >
                <keep-alive>
                    <tree @uploadPackage='uploadPackage'></tree>
                </keep-alive>
                
            </baseDrawer>
        </div>
        <div class="right-sub-box" :style="changeShowFlag?'width: calc(100% - 200px);':'width: 100%;'">
            <div class="search-box">
                <div class="search-box-sub">
                <span class="lable-text">{{$t('dictionary.lang')}}</span>
                <el-select v-model="lang" filterable :placeholder="$t('index.selectStates')" :clearable='true'>
                    <el-option
                    v-for="item in lanDataList"
                    :key="item.value"
                    :label="item.code"
                    :value="item.value">
                    </el-option>
                </el-select>
                </div>
                <div class="search-box-sub">
                    <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
                </div>
            </div>
            <div class="button-box">
                <el-button type="primary" icon='el-icon-edit' class="marginR10" @click="showAddModal">{{$t('add')}}</el-button>
                <el-popconfirm
                        :confirm-button-text="$t('sure')"
                        :cancel-button-text="$t('cancel')"
                        :title="$t('promotionManagement.allDelete')"
                    @confirm='dictionaryDeleteBatch()'
                >
                    <el-button type="" slot="reference" icon='el-icon-delete' >{{$t('delete')}}</el-button>
                </el-popconfirm>
            </div>
            <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column' :select='true'>
                <template #lang="{data}">
                    {{returnDictionaryTypeCode(data.lang)}}
                </template>
                <template #option="{data}">
                    <div class="option-box">
                        <el-button size='small' type="primary" icon="el-icon-edit"  @click='editDictionary(data)' class="marginR10"></el-button>
                        <el-popconfirm
                                :confirm-button-text="$t('sure')"
                                :cancel-button-text="$t('cancel')"
                                :title="$t('index.delete_item_confirm')"
                            @confirm='dictionaryDeleteBatchSub(data.sid)'
                        >
                            <el-button class="marginR10" type="" slot="reference" icon='el-icon-delete' ></el-button>
                        </el-popconfirm>
                    </div>
                </template>
            </baseTable>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
        <add :langDataList='lanDataList' :dictCode='dictCode' @uploadData='uploadData' v-if='dictionaryVisible'></add>
        <edit :langDataList='lanDataList'  @uploadData='uploadData' :editRowDataList='editRowDataList'></edit>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTableNew'
import baseDrawer from '../../../components/common/baseDrawer'
import tree from './tree'
import add from './add.vue'
import edit from './edit.vue'
export default {
    components: {
        baseDrawer,
        baseTable,
        tree,
        add,
        edit
    },
    props: {

    },
    data() {
        return {
            editRowDataList:'',
            changeShowFlag:true,
            lang:'',
            dictCode:{},
            lanDataList:[],
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('dictionary.code'),
                value: 'code',
            },
            {
                title: this.$t('dictionary.value'),
                value: 'value',
                slot: 'value'
            },
            {
                title: this.$t('dictionary.dictCode'),
                value: 'dictCode',
                slot: 'dictCode'
            },{
                title: this.$t('dictionary.lang'),
                value: 'lang',
                slot: 'lang'
            },{
                title: this.$t('dictionary.sort'),
                value: 'sort',
                slot: 'sort'
            },{
                title: '操作',title: this.$t('control'),
                value: 'sid',
                slot: 'option'
            }],
            total:1,
            size:10,
            current:1,
            selectDataList:[]
        };
    },
    computed: {
        dictionaryVisible(){
            return this.$store.state.sysStore.dictionaryVisible
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
        this.dictionaryGetPage()
    },
    methods: {
        editDictionary(data){
            this.editRowDataList = data
            this.$store.commit('setDictionaryVisibleEdit',true)
        },
        uploadData(){
            this.query()
        },
        showAddModal(){
            if(this.dictCode && this.dictCode.dictType == 2){
                this.$store.commit('setDictionaryVisible',true)
            }else{
                this.$message({
                message: this.$t('dictionary.js_selectDicType'),
                type: 'warning'
                });
            }
        },
        async dictionaryDeleteBatch(){
            if(this.selectDataList.length == 0){
                this.comm.showMsg(false,this.$t('index.delete_select'))
                return
            }
            let res = await this.API.dictionaryDeleteBatch({
                ids:this.selectDataList.map(item=>{return item.sid})
            })
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.query()
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        async dictionaryDeleteBatchSub(id){
            let res = await this.API.dictionaryDeleteBatch({
                ids:id
            })
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.query()
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        returnDictionaryTypeCode(val){
            let code = ''
            this.lanDataList.forEach( item=>{
                if(item.value == val){
                   code =  item.code 
                }
            })
            return code
        },
        async dictionaryGetPage(){
            this.loading = true
            let res = await this.API.dictionaryGetPage({
                dictCode:this.dictCode.dictCode || '',
                lang:this.lang,
                size: this.size,
                current:this.current
            })
            this.total = res.total
            this.dataRows = res.rows || []
            this.loading = false
        },
        changeShow(flag){
            this.changeShowFlag = flag
        },
        uploadPackage(data){
             this.dictCode = data
             this.current = 1
             this.dictionaryGetPage()
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes: 'Lang_Type',
                lang: localStorage.getItem('lan')
            })
            this.lanDataList = res.Lang_Type
        },
        query(){
            this.current = 1
            this.dictionaryGetPage()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.dictionaryGetPage()
        },
        handleCurrentChange(val) {
          this.current = val
          this.dictionaryGetPage()
        },
        handleSelectionChange(data){
            this.selectDataList = data
        }
    },
};
</script>

<style  lang="less" scoped>
.dictionary-main-box{
    display: flex;
    height: 100%;
    font-size: 14px;
    width: 100%;
    .left-sub-box{

    }
    .right-sub-box{
        flex: 1;
    }
}
</style>
